<template>
    <div v-if="showDialog" class="full-video-container">
        <div class="full-video-box">
            <video ref="videoRef" v-if="videoUrl" class="video-item" controls :src="videoUrl"></video>
            <template v-else>
                <el-carousel height="496px" :autoplay="false" @change="onChange">
                    <el-carousel-item v-for="(item, index) in videoList" :key="index">
                        <video :ref="(el) => setItemRefs(el, index)" class="video-item" controls :src="item"></video>
                    </el-carousel-item>
                </el-carousel>
            </template>
            <el-icon class="icon-close pointer" @click="onClose">
                <Close />
            </el-icon>
            <div v-if="controls" class="controls-box">
                <div class="icon-delete mg-b-25 pointer" @click="onRemove"></div>
                <div class="icon-download mg-b-25 pointer" @click="onDownload"></div>
                <div class="icon-play pointer" @click="onPlay"></div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
/**
 * 单个的直接传videoUrl 多个的传videoList 两个传一个就行
 * videoList 格式为 ['xxxxxx.mp4']
 */
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    videoUrl: {
        type: String
    },
    videoList: {
        type: Array
    },
    controls: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['update:show'])

let showDialog = ref(false)

let videoRef = ref<HTMLVideoElement | null>(null)

let videoLiseRef = ref({}) as any

let cur = ref(0)

const setItemRefs = (el: HTMLElement, index: number) => {
    if (el) {
        videoLiseRef.value[`video${index}`] = el
    }
}
/**
 * 点击关闭按钮，关闭后将正在播放的视频暂停掉
 */
const onClose = () => {
    if (props.videoUrl) {
        (videoRef.value as HTMLVideoElement).pause()
    } else {
        for (const key in videoLiseRef.value) {
            videoLiseRef.value[key].pause()
        }
    }
    showDialog.value = false
}
/**
 * 点击删除按钮
 */
const onRemove = () => {
    ElMessageBox.confirm(
        '确认删除该视频吗？',
        '提示',
        {
            type: 'warning'
        }
    )
        .then(() => {
            if (props.videoUrl) {

            } else {

            }
        })
}
/**
 * 点击下载按钮
 */
 const onDownload = () => {
    if (props.videoUrl) {
        handleDownload(props.videoUrl)
    } else {
        handleDownload((props.videoList as any)[cur.value])
    }
}

/**
 * 下载视频
 * @param url
 */
const handleDownload = (url: string) => {
    fetch(url).then(res => {
        return res.blob()
    }).then((blob: Blob) => {
        const a = document.createElement('a')
        const objUrl = window.URL.createObjectURL(blob)
        a.href = objUrl
        a.download = '视频'
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(objUrl)
        document.body.removeChild(a)
    })
}

const onPlay = () => {
    if (props.videoUrl) {
        (videoRef.value as HTMLVideoElement).play()
    } else {
        for (const key in videoLiseRef.value) {
            videoLiseRef.value[key].pause()
        }
        videoLiseRef.value[`video${cur.value}`].play()
    }
}

const onChange = (ev: number) => {
    cur.value = ev
}

watch(() => props.show, (newval) => {
    showDialog.value = newval
})

watch(showDialog, (newval) => {
    emits('update:show', newval)
})

</script>
<style lang="stylus" scoped>
.full-video-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.video-item {
    width: 772px;
    height: 496px;
    border-radius: 12px;

}

.full-video-box {
    width: 772px;
    height: 496px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.controls-box {
    position: absolute;
    right: -60px;
    bottom: 10px;
}

.icon-close {
    position: absolute;
    right: 0;
    top: -50px;
    color: #fff;
    font-size: 30px;
}

.icon-delete {
    width: 36px;
    height: 36px;
    background: url('../../assets/img/video/icon-delete.png') no-repeat 100% 100%;
    background-size: cover;

    &:hover {
        background: url('../../assets/img/video/icon-delete-hover.png') no-repeat 100% 100%;
        background-size: cover;
    }
}

.icon-download {
    width: 36px;
    height: 36px;
    background: url('../../assets/img/video/icon-download.png') no-repeat 100% 100%;
    background-size: cover;

    &:hover {
        background: url('../../assets/img/video/icon-download-hover.png') no-repeat 100% 100%;
        background-size: cover;
    }
}

.icon-play {
    width: 36px;
    height: 36px;
    background: url('../../assets/img/video/icon-play.png') no-repeat 100% 100%;
    background-size: cover;

    &:hover {
        background: url('../../assets/img/video/icon-play-hover.png') no-repeat 100% 100%;
        background-size: cover;
    }
}
</style>
